<template>
	<view class="orderDetail-container">
		<!-- navbar -->
		<!-- <view class="header">
			<image src="/static/images/leftarrow.png" @click="goBack" />
			<view class="title">订单详情</view>
		</view> -->
		<!-- 支付状态 -->
		<view class="payState">
			<view class="text">{{orderState}}</view>
			<image src="/static/images/nocart.png" />
		</view>
		<!-- 收货地址 -->
		<view class="site">
			<image src="/static/images/dz.png" />
			<view class="text">
				{{cartStore.orderInfo.address_info.name}}-{{cartStore.orderInfo.address_info.tel}}-{{cartStore.orderInfo.address_info.province}}-{{cartStore.orderInfo.address_info.city}}-{{cartStore.orderInfo.address_info.county}}
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="good-list">
			<view class="item" v-for="item in cartStore.orderGood" :key="item.id">
				<image :src="item.thumb_path" />
				<view class="text">
					<view class="title">{{item.title}}</view>
					<view class="price">￥{{item.sell_price}}</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderInfo">
			<view class="item">
				<view class="title">下单时间</view>
				<view class="content">{{ unixToformatDate(cartStore.orderInfo.add_time) }}</view>
			</view>
			<view class="item">
				<view class="title">商品总价</view>
				<view class="content">￥{{cartStore.orderInfo.total_price}}</view>
			</view>
			<view class="item">
				<view class="title">商品数量</view>
				<view class="content">{{cartStore.orderInfo.number}}</view>
			</view>
			<view class="item">
				<view class="title">付款方式</view>
				<view class="content">微信支付</view>
			</view>
			<view class="item">
				<view class="title">运费险</view>
				<view class="content">￥0.00</view>
			</view>
			<view class="item">
				<view class="title">订单号</view>
				<view class="content">{{cartStore.order_id}}</view>
				<view class="copy">复制</view>
			</view>
			<view class="item">
				<view class="title">联系客服</view>
				<view class="contact">联系客服</view>
			</view>
		</view>
		<!-- 结算画面 -->
		<view class="close">
			<view class="pay" v-if="cartStore.orderInfo.status === 0 && cartStore.orderInfo.is_cancel === 0"
				@click="pay">立即付款</view>
			<view class="cancel" @click="cancel"
				v-if="cartStore.orderInfo.status === 0 && cartStore.orderInfo.is_cancel === 0">取消订单</view>
			<view class="canceled" v-if="cartStore.orderInfo.is_cancel === 1">订单已取消</view>
			<view class="del" v-if="cartStore.orderInfo.is_cancel == 1" @click="del">删除订单</view>
			<view class="logistics" v-if="cartStore.orderInfo.is_out === 1">物流信息</view>
			<view class="remind" v-if="cartStore.orderInfo.is_out === 0 && cartStore.orderInfo.status === 1">提醒发货</view>
		</view>
		<view class="pay-mask" v-if="pay_img" @click="stop">
			<view class="pay-box">
				<view class="pay-tip">请在PC浏览器端打开此网站，手机扫码付款</view>
				<image class="pay-qrcode" :src="pay_img"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import QRCode from 'qrcode';
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad,
		onHide,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		storeToRefs
	} from 'pinia'
	import {
		unixToformatDate
	} from '/utils/util.js'
	import {
		cancelOrder,
		delOrder,
		payOrder,
		queryPayOrder
	} from '../../api/cart.api';
	import {
		useCartStore,
	} from '../../stores/store';
	const cartStore = useCartStore()
	// 解构订单数据
	const {
		orderCode
	} = cartStore
	// 解构地址
	const {
		address_info
	} = cartStore.orderInfo

	const pay_img = ref('') // 支付二维码

	const system = ref('') // 系统

	let timer;

	onLoad((options) => {
		initData(options)
		const systemInfo = uni.getSystemInfoSync()
		system.value = systemInfo.hostName
	})


	const initData = async (options) => {
		if (options.order_id && options.goods_ids) {
			cartStore.order_id = options.order_id
			cartStore.cartDataId = options.goods_ids
			await cartStore.reSubmitOrder()
		}
	}

	// 订单状态
	const orderState = computed(() => {
		if (cartStore.orderInfo.status === 0 && cartStore.orderInfo.is_cancel === 0) {
			return '等待付款'
		}

		if (cartStore.orderInfo.status === 1 && cartStore.orderInfo.is_out === 0) {
			return '等待发货'
		}

		if (cartStore.orderInfo.is_out === 1 && cartStore.orderInfo.is_take === 0) {
			return '你的包裹正在派送中'
		}

		if (cartStore.orderInfo.is_finish === 1) {
			return '已完成'
		}

		if (cartStore.orderInfo.is_cancel === 1) {
			return '已取消'
		}
		return ''
	})

	// 支付
	const pay = async () => {
		console.log('支付时=>', cartStore.order_id);
		let orderData = {
			openid: uni.getStorageSync('openid'),
			order_id: cartStore.order_id,
			total_price: cartStore.orderInfo.total_price
		}
		let payResult = await payOrder(orderData)
		let {
			status,
			data
		} = payResult
		if (status !== 200) {
			uni.showToast({
				title: "支付失败"
			})
			return;
		}

		if (system.value === 'WeChat') {
			// 小程序端
			uni.requestPayment({
				...data
			})

			// 心跳监测
			timer = setInterval(async () => {
				checkOrderStatus()
			}, 1000)
		} else {
			// h5端
			const img_url = await QRCode.toDataURL(data.code_url)
			pay_img.value = img_url

			uni.showToast({
				title: "h5弹出支付二维码" + data.code_url
			})
		}




	}

	// 检查订单状态
	const checkOrderStatus = async () => {
		let {
			code
		} = await queryPayOrder(cartStore.order_id)
		if (code === 20000) {
			clearInterval(timer)
			uni.showToast({
				title: '付款成功',
				icon: 'success'
			})
		}
	}

	const stop = () => {
		console.log('关闭模态框');
		pay_img.value = ''
		clearInterval(timer)
	}

	// 取消
	const cancel = () => {
		cancelOrder(cartStore.order_id)
		cartStore.reSubmitOrder()
	}

	// 删除订单
	const del = () => {
		uni.showModal({
			title: '确定删除吗',
			success: async (res) => {
				if (res.confirm) {
					await delOrder(cartStore.order_id)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
		})
	}

	// 返回
	const goBack = () => {
		uni.navigateBack()
	}

	onHide(() => {
		clearInterval(timer)
	})

	onUnload(() => {
		clearInterval(timer)
	})
</script>

<style lang="scss" scoped>
	.orderDetail-container {

		// navbar
		.header {
			width: px2rpx(375);
			height: px2rpx(50);
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ccc;

			image {
				width: px2rpx(16);
				height: px2rpx(16);
				margin: 0 px2rpx(20);
			}

			.title {
				font-size: px2rpx(14);
				margin-left: px2rpx(110);
			}
		}

		// 支付状态
		.payState {
			width: px2rpx(375);
			height: px2rpx(90);
			background-color: #e35838;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.text {
				font-size: px2rpx(18);
				color: #fff;
			}

			image {
				width: px2rpx(80);
				height: px2rpx(80);
			}
		}

		// 收货地址
		.site {
			height: px2rpx(53);
			width: px2rpx(375);
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			image {
				width: px2rpx(20);
				height: px2rpx(20);
			}

			.text {
				font-size: px2rpx(14);
			}
		}

		// 商品列表
		.good-list {
			width: px2rpx(375);
			display: flex;
			flex-direction: column;
			align-items: center;

			.item {
				background-color: #fafafa;
				height: px2rpx(88);
				width: px2rpx(345);
				margin: px2rpx(10) 0;
				display: flex;

				image {
					height: px2rpx(88);
					width: px2rpx(88);
					margin-right: px2rpx(10);
				}

				.text {
					height: px2rpx(88);
					width: px2rpx(247);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;

					.title {
						font-size: px2rpx(12);
					}

					.price {
						font-size: px2rpx(16);
					}
				}
			}
		}

		// 订单信息
		.orderInfo {
			height: px2rpx(152);
			width: px2rpx(375);
			font-size: px2rpx(14);
			color: #787873;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item {
				width: px2rpx(355);
				display: flex;
				justify-content: space-between;
				margin: 0 px2rpx(10);

				.contact,
				.copy {
					color: #1989fa;
				}
			}
		}

		// 结算
		.close {
			position: fixed;
			bottom: 0;
			height: px2rpx(60);
			width: px2rpx(375);
			display: flex;
			align-items: center;
			justify-content: flex-end;
			box-shadow: 0 0 px2rpx(10) #ccc;

			.pay {
				height: px2rpx(25);
				width: px2rpx(60);
				background-color: #ee0a24;
				margin-right: px2rpx(10);
				font-size: px2rpx(10);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: px2rpx(5);
				color: #fff;
			}

			.cancel {
				height: px2rpx(25);
				width: px2rpx(50);
				background-color: #ff976a;
				margin-right: px2rpx(20);
				font-size: px2rpx(10);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: px2rpx(5);
				color: #fff;
			}

			.canceled {
				height: px2rpx(25);
				width: px2rpx(60);
				background-color: #ff976a;
				opacity: 0.5;
				margin-right: px2rpx(10);
				font-size: px2rpx(10);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: px2rpx(5);
				color: #fff;
			}

			.del {
				height: px2rpx(25);
				width: px2rpx(50);
				background-color: #fff;
				margin-right: px2rpx(20);
				font-size: px2rpx(10);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: px2rpx(5);
				color: #ff976a;
				border: 1px solid #ff976a;
			}

			.remind {
				height: px2rpx(25);
				width: px2rpx(50);
				background-color: #fff;
				margin-right: px2rpx(20);
				font-size: px2rpx(10);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: px2rpx(5);
				color: #ff976a;
				border: 1px solid #ff976a;
			}
		}

		.pay-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1000;

			.pay-box {
				background-color: #fff;
				border-radius: px2rpx(10);
				padding: px2rpx(20);
				width: 70%;
				max-width: px2rpx(300);
				text-align: center;

				.pay-tip {
					font-size: px2rpx(14);
					color: #666;
					margin-bottom: px2rpx(15);
				}

				.pay-qrcode {
					width: px2rpx(200);
					height: px2rpx(200);
					margin: 0 auto;
					display: block;
				}
			}
		}
	}
</style>